﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--[if IE 8 ]>
<html class="ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><!--<![endif]-->
<head>
    <!-- Basic Page Needs -->
    <meta charset="UTF-8">
    <!--[if IE]>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
    <title>Techno Store - Blog sidebar left</title>

    <meta name="author" content="CreativeLayers">

    <!-- Mobile Specific Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Boostrap style -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">

    <!-- Theme style -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/style.css">

    <!-- Reponsive -->
    <link rel="stylesheet" type="text/css" href="/stylesheets/responsive.css">

    <link rel="shortcut icon" href="/favicon/favicon.png">

</head>
<body class="header_sticky">
<div class="boxed">

    <div class="overlay"></div>

    <!-- Preloader -->
    <div class="preloader">
        <div class="clear-loading loading-effect-2">
            <span></span>
        </div>
    </div><!-- /.preloader -->


    <div th:insert="~{header :: #header}"></div>

    <section class="flat-breadcrumb">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <ul class="breadcrumbs">
                        <li class="trail-item">
                            <a href="/page/index" title="">首页</a>
                            <span><img src="/images/icons/arrow-right.png" alt=""></span>
                        </li>
                        <li class="trail-item">
                            <a href="/page/recipes" title="">食谱</a>
                            <span><img src="/images/icons/arrow-right.png" alt=""></span>
                        </li>
                        <li class="trail-end">
                            <a title="">所有食谱</a>
                        </li>
                    </ul><!-- /.breacrumbs -->
                </div><!-- /.col-md-12 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.flat-breadcrumb -->

    <section class="main-blog">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-4">
                    <div class="sidebar left">
                        <div class="widget widget-products">
                            <div class="widget-title">
                                <h3>最新产品</h3>
                            </div>
                            <ul class="product-list">
                                <li th:each="food:${foods}" style="height: 100px;">
                                    <div class="img-product">
                                        <a th:href="'/page/foodDetail?foodId=' + ${food.id}" title="">
                                            <img style="width: 100px;height: 100px;"
                                                 th:src="'http://47.94.10.67/images/' + ${food.imgUrl}" alt="">
                                        </a>
                                    </div>
                                    <div class="info-product">
                                        <div class="name">
                                            <a th:href="'/page/foodDetail?foodId=' + ${food.id}" title="" th:text="${food.foodName}"></a>
                                        </div>
                                        <div class="price">
                                            <span class="sale" th:text="${food.nowPrice}"></span>
                                            <span class="regular" th:text="${food.oldPrice}"></span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div><!-- /.widget widget-products -->
                    </div><!-- /.sidebar left -->
                </div><!-- /.col-lg-3 col-md-4 -->
                <div class="col-lg-9 col-md-8">
                    <div class="post-wrap">
                        <article class="main-post" th:each="recipes:${recipes.list}">
                            <div class="featured-post">
                                <a th:href="'/recipes/recipesDetail?recipesId='+ ${recipes.id}" title="">
                                    <img style="width: 847px; height: 365px;"
                                         th:src="'http://47.94.10.67/images/' + ${recipes.imgUrl}" alt="">
                                </a>
                            </div><!-- /.featured-post -->
                            <div class="divider25"></div>
                            <div class="content-post">
                                <h3 class="title-post">
                                    <a th:href="'/recipes/recipesDetail?recipesId='+ ${recipes.id}"
                                       th:text="${recipes.title}"></a>
                                </h3>
                                <ul class="meta-post">
                                    <li class="comment">
                                        <a title="">发布时间：</a>
                                    </li>
                                    <li class="date">
                                        <a title=""
                                           th:text="${#dates.format(recipes.updateTime,'yyyy年MM月dd日 HH:mm')}"></a>
                                    </li>
                                </ul>
                                <div class="entry-post">
                                    <p></p>
                                    <div class="more-link">
                                        <a th:href="'/recipes/recipesDetail?recipesId='+ ${recipes.id}" title="">阅读更多
                                            <span>
													<img src="/images/icons/right-2.png" alt="">
												</span>
                                        </a>
                                    </div>
                                </div>
                            </div><!-- /.content-post -->
                        </article><!-- /.main-post -->
                    </div><!-- /.post-wrap -->
                    <div class="blog-pagination">
                        <ul class="flat-pagination">
                            <li class="prev" th:if="${recipes.hasPreviousPage}">
                                <a th:href="'/page/recipes?pageNum=' + ${recipes.prePage}" title="">
                                    <img src="/images/icons/left-1.png" alt="">上一页
                                </a>
                            </li>
                            <li th:each="num:${recipes.navigatepageNums}">
                                <a th:href="'/page/recipes?pageNum=' + ${num}"
                                   class="waves-effect waves-teal" th:text="${num}" title=""></a>
                            </li>
                            <li class="next" th:if="${recipes.hasNextPage}">
                                <a th:href="'/page/recipes?pageNum=' + ${recipes.nextPage}" title="">
                                    <img src="/images/icons/right-1.png" alt="">下一页
                                </a>
                            </li>
                        </ul><!-- /.flat-pagination -->
                    </div><!-- /.blog-pagination -->
                </div><!-- /.col-lg-9 col-md-8 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section>

    <section class="flat-iconbox">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/car.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">全球送货</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">订单满$ 100免运费</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/order.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">在线订购服务</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">30天内免费退货</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/payment.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">付款</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">安全系统</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
                <div class="col-md-3">
                    <div class="iconbox">
                        <div class="box-header">
                            <div class="image">
                                <img src="/images/icons/return.png" alt="">
                            </div>
                            <div class="box-title">
                                <h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">返回30天</font></font></h3>
                            </div>
                        </div><!-- /.box-header -->
                        <div class="box-content">
                            <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">30天内免费退货</font></font></p>
                        </div><!-- /.box-content -->
                    </div><!-- /.iconbox -->
                </div><!-- /.col-md-3 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section>
    <div th:insert="~{footer :: #footer}"></div>

    <section class="footer-bottom">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <p class="copyright"> All Rights Reserved © Techno Store 2017</p>
                    <p class="btn-scroll">
                        <a href="#" title="">
                            <img src="/images/icons/top.png" alt="">
                        </a>
                    </p>
                </div><!-- /.col-md-12 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.footer-bottom -->

</div><!-- /.boxed -->

<!-- Javascript -->
<script type="text/javascript" src="/javascript/jquery.min.js"></script>
<script type="text/javascript" src="/javascript/tether.min.js"></script>
<script type="text/javascript" src="/javascript/bootstrap.min.js"></script>
<script type="text/javascript" src="/javascript/waypoints.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.circlechart.js"></script>
<script type="text/javascript" src="/javascript/easing.js"></script>
<script type="text/javascript" src="/javascript/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="/javascript/owl.carousel.js"></script>
<script type="text/javascript" src="/javascript/smoothscroll.js"></script>
<script type="text/javascript" src="/javascript/jquery-ui.js"></script>
<script type="text/javascript" src="/javascript/jquery.mCustomScrollbar.js"></script>
<script type="text/javascript" src="/javascript/gmap3.min.js"></script>
<script type="text/javascript" src="/javascript/waves.min.js"></script>
<script type="text/javascript" src="/javascript/jquery.countdown.js"></script>
<script type="text/javascript" src="/javascript/main.js"></script>

</body>
</html>
